<template>
    <div class="root">
      <!--<div class="bookImage">-->
        <!--<img src="../../public/image/book.jpg" width="200px"/>-->
      <!--</div>-->
      <div class="bookInfoContain" v-for="item in book" :key="item.id">
        <p class="bookName">{{item.name}}</p>
        <div class="bookIntroduce">
          <div class="bookIntroduce-image">
            <img :src="item.url" title="点我查看大图" style="width: 135px;max-height: 200px;" preview="1"/>
          </div>
          <div class="bookIntroduce-info">
            <ul>
              <li><span>作者:</span> {{item.author}}</li>
              <li><span>出版社:</span> {{item.press}}</li>
              <li><span>译者:</span> {{item.translator}}</li>
              <li><span>出版年:</span> {{item.publication}}</li>
              <li><span>页数:</span> {{item.page}}</li>
              <li><span>定价:</span> {{item.price}}元</li>
              <li><span>装帧:</span> {{item.binding}}</li>
              <li><span>ISBN:</span> {{item.isbn}}</li>
              <el-button type="danger" plain class="shoppingButton" @click="shopping">加入购物车</el-button>购买数量：<input placeholder="1" :value="buyNumber" @change="NumberHande"/>
            </ul>
          </div>
        </div>
        <div class="contentIntroduce">
          <h1>内容简介</h1>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <div class="contentInfo">
            <p>{{item.contentabstract}}</p>
          </div>
        </div>
        <div class="authorIntroduce">
          <h1>作者简介</h1>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <div class="authorInfo">
            <p>{{item.writerabstract}}</p>
          </div>
        </div>
        <div class="comment">
          <textarea placeholder="请输入要评论的内容(最多100个字)" @change="contentHande"  :value="content"></textarea>
          <el-button round @click="subbmitComment">提交</el-button>
          <div class="commentInfo">
            <h1>评论</h1>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <div class="userComment" v-for="item in bookComment" :key="item.id">
              <span class="comment-user">评论用户: {{item.user_name}}&nbsp;</span>
              <span class="comment-time">发表时间：{{item.time | dateFormat}}</span>
              <p>{{item.content}}</p>
            </div>
          </div>
          <div class="block">
            <el-pagination
              layout="prev, pager, next, jumper, total"
              :total="50">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'bookInfo',
  data () {
    return {
      // 获取路由中的id
      id: this.$route.params.id,
      // 书的数组
      book: [],
      // 书的评论内容数组
      bookComment: [],
      // 用户评论内容
      content: '',
      buyNumber: ''
    }
  },
  created () {
    this.getBookInfo()
    this.getComment()
  },
  methods: {
    contentHande (e) {
      this.content = e.target.value
    },
    getBookInfo () {
      this.axios.get('BookCrud/ListBookById?id=' + this.id).then(res => {
        this.book = res.data
        this.$store.commit('setChooseBookId', res.data[0].id)
      })
    },
    getComment () {
      this.axios.get('CommentCrud/ListCommentById?book_id=' + this.id).then(res => {
        this.bookComment = res.data
      })
    },
    subbmitComment () {
      if (this.content.trim().length <= 0) {
        this.$message({
          showClose: true,
          message: '评论不能为空',
          type: 'warning'
        })
      }
      var comm = {
        user_name: this.nameValue,
        content: this.content,
        time: Date.now()
      }
      this.bookComment.unshift(comm)
      this.content = ''
    },
    shopping () {
      this.$router.push({
        name: 'shoppingCar'
      })
    },
    NumberHande (e) {
      this.$store.commit('setBuyNumber', e.target.value)
    }
  },
  computed: {
    ...mapState(['nameValue'])
  }
}
</script>

<style scoped>
/*.root{
  display: flex;
}*/
.bookInfoContain {
  width: 700px;
  margin-left: 200px;
}
li{
  list-style-type: none;
}
li span {
  color: #666666;
}
.shoppingButton{
  margin-top: 10px;
}
h1{
  font-size: 16px;
  color: #007722;
  display: inline-block;
  margin-right: 8px;
}
i {
  width:2px;
  height:2px;
  margin-right: 10px;
  border-radius:50%;
  background-color:#007722;
  display: inline-block;
}
.bookName {
  margin: 20px auto;
  font-size: 26px;
  color: #494949;
  font-weight: bold;
  font-family: Helvetica,Arial,sans-serif;
}
.bookIntroduce{
  display: flex;
}
.bookIntroduce-image img {
  cursor: pointer;
}
textarea {
  font-size: 14px;
  height: 85px;
  width: 300px;
  margin: 0;
}
.userComment{
  font-size: 14px;
}
.comment-user{
  color: #3377AA;
}
.comment-time{
  color: #3377AA;
}
.userComment p{
  color: #666666;
}
</style>
